<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>会员中心</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
	<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="statics/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="top">

	<!--状态-->
	<div class="status" style="padding-top: 1.1rem">
		<span>求职会员</span>
		<p>*升级VIP提升求职效率</p>
	</div>
</div>
<!--精选会员卡列表-->
<div class="card-list active">
	<div class="cate" style="height: 0.1rem;">

	</div>
	<div class="list">
		<ul class="active">
			<li class="active" productId="1836675212324028418">
				<div class="title">周卡</div>
				<div class="desc">
					<p class="yh">6折优惠</p>
					<p class="money"><i>¥</i><span>10</span></p>
					<p class="old">原价¥20</p>
				</div>
			</li>
			<li productId="1836675212324028418">
				<div class="title">1个月</div>
				<div class="desc">
					<p class="yh">9折优惠</p>
					<p class="money"><i>¥</i><span>18</span></p>
					<p class="old">原价¥30</p>
				</div>
			</li>
			<li productId="1836675212324028418">
				<div class="title">3个月</div>
				<div class="desc">
					<p class="money"><i>¥</i><span>45</span></p>
					<p class="old">原价¥60</p>
				</div>
			</li>
			<li productId="1836675212324028418">
				<div class="title">12个月</div>
				<div class="desc">
					<p class="money"><i>¥</i><span>120</span></p>
					<p class="old">原价¥240</p>
				</div>
			</li>
		</ul>
		<ul>
			<!-- 这里是普通会员卡列表，结构和上面的ul一样 -->
		</ul>
		<p class="tip">首月仅需15元，每月自动续费，可随时关闭</p>
	</div>
</div>

<!--特权-->
<div class="tequan">
	<ul>
		<li>
			<img src="statics/images/icon-meilizhi.png"/>
			<p>魅力值</p>
			<span>兑换更多金币</span>
		</li>
		<li>
			<img src="statics/images/icon-huiyuanjia.png"/>
			<p>会员价</p>
			<span>地址4折</span>
		</li>
		<li>
			<img src="statics/images/icon-huiyuanri.png"/>
			<p>会员日</p>
			<span>每月5日</span>
		</li>
		<li>
			<img src="statics/images/icon-shengri.png"/>
			<p>生日礼</p>
			<span>奢侈品折扣</span>
		</li>
	</ul>
</div>
<!--支付方式-->
<div class="shuoming">
	<p>特权说明</p>
	<p>1.次数用于联系老板</p>
	<p>2.会员定于职位后，可享受招工信息优先推送</p>
	<p>2.系统优先向招工老板推荐会员用户</p>
</div>
<div class="pay-type">
	<ul>
		<li class="active">
			<div class="type">
				<i class="wx"></i>
				<span>微信支付<sup>优惠</sup></span>
			</div>
			<i class="check"></i>
		</li>
		<!--<li>
			<div class="type">
				<i class="ali"></i>
				<span>支付宝支付</span>
			</div>
			<i class="check"></i>
		</li>
		<li>
			<div class="type">
				<i class="bank"></i>
				<span>银联支付</span>
			</div>
			<i class="check"></i>
		</li>
		<li class="hidden">
			<div class="type">
				<i class="ali"></i>
				<span>花呗支付</span>
			</div>
			<i class="check"></i>
		</li>-->
	</ul>
	<!--<p class="more">+&nbsp;<span>点击查看更多</span></p>-->
</div>
<div class="xuzhi">
	<p>购买须知</p>
	<p>一、使用说明</p>
	<p>1.会员有效期内，会员用户可以在权益次数内免费联系老板</p>
	<p>2.会员免费联系老板次数会在每日24点刷新，当日次数清理并发放第二日次数。</p>
	<p>3.会员重复购买，会员有效期自动展期。</p>
	<p>一、生效与终止说明</p>
	<p>1.会员购买后立即生效，不支持退款和取消，时间到期后权益自动终止，终止后剩余权益不可使用，次数自动清零。</p>
	<p>2.会员周卡为自然天数7天，购买月刊天数为自然日30天，购买季卡天数为自然日90天，购买年卡天数为自然日365天。</p>

</div>
<!--开通会员-->
<div class="submit">
	<p>确认协议并支付<span>￥ <i id="totalPrice">5</i></span></p>
	<button>开通会员</button>
</div>
</body>


</html>
<script>
	const packageList= [
		{
			id:productId="1836675212324028418",
			name:'周卡',
			price:15
		},
		{
			id:productId="1836675212324028418",
			name:'1个月卡',
			price:18
		},
		{
			id:productId="1836675212324028418",
			name:'3个月',
			price:45
		},
		{
			id:productId="1836675212324028418",
			name:'12个月',
			price:120
		}
	]
	// 更多
	$('.more').click(function(e){
		e.stopPropagation()
		$('.more-box').toggle()
	})
	$(document).click(function(){
		$('.more-box').hide()
	})
	// 精选，游戏，亲情卡切换
	$('.type ul li').click(function(){
		var index = $(this).index();
		$(this).addClass('active').siblings().removeClass('active');
		$('.card-list').removeClass('active').eq(index).addClass('active');
		$('.card-list').find('ul').removeClass('active')
		$('.card-list').eq(index).find('ul').addClass('active');
	})
	// 超级会员，普通会员切换
	$('.card-list .cate p').click(function(){
		var index = $(this).index();
		$(this).addClass('active').siblings().removeClass('active');
		$(this).parents('.card-list').find('ul').removeClass('active').eq(index).addClass('active');
	})
	// 选择套餐
	$('.card-list .list ul li').click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		var index = $(this).index();
		//alert(packageList[index].name);
		$("#totalPrice").text(packageList[index].price)
	})
	// 提交
	$('.submit button').click(function(){
		var current = $('.card-list.active .list ul.active li.active');
		// 开通时常
		var time = current.find('.title').text();
		var productId = current.attr('productId');
		// 价格
		var price = current.find('.desc .money span').text();
		//alert("您确定要开通："+time+"会员吗？，价格："+price+" 元")
		//alert(Android.getToken());
		Android.openMember(productId,price);
	})
</script>
<script type="text/javascript">
	$(function(){
  		// OnLoad 文档就绪
  		//加载套餐
  		getVipPackageList();
	});
	// 快捷支付
	$('.quick-pay ul li').click(function(){
		var money = $(this).find('span').text()
		$(this).addClass('active').siblings().removeClass('active')
		$('.money').find('i').text(money)
	})
	// 其他金额
	$('.other-pay input').bind('input propertychange',function(){
		if(!/^[0-9]*$/.test($(this).val()) || $(this).val()==0){
			$(this).val("")
			alert('请输入正确金额')
			return
		}
		$('.quick-pay ul li').removeClass('active')
		var money = $(this).val()
		$('.money').find('i').text(money)
	})
	// 支付方式选择
	$('.pay-type ul li').click(function(){
		$(this).addClass('active').siblings().removeClass('active')
	})
	// 查看更多
	$('.pay-type .more').click(function(){
		$(this).css('visibility','hidden')
		$('.pay-type ul li').removeClass('hidden')
	})
	function getVipPackageList(){
		$.ajax({
			url: "https://488062nl49.vicp.fun/api/front/product/memberPackage/qz", // 请求的URL
			// data:{"id":val},     // data参数是可选的，有多种写法，也还可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,
			//data:"id="+val,
			async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
			cache:true,  // 表示浏览器是否缓存被请求页面,默认是 true
			type: "GET", // 请求类型，默认为GET
			dataType: "json", // 预期服务器返回的数据类型
			success: function(response) { // 请求成功时的回调函数
			console.log(response); // 在控制台打印服务器返回的数据
			},
			error: function(xhr, status, error) { // 请求失败时的回调函数
			console.error(error); // 在控制台打印错误信息
			}
		});
	}
</script>